<template>
  <BKModal
    v-model="visible"
    width="100%"
    height="100%"
    @close="close"
    title="修改工作台"
  >
    <BKMutableContainer
      left-width="340px"
      min-left-width="240px"
      ref="mc"
    >
      <template #left>
        <left
          ref="left"
          :open-page="openPage"
          @setExpand="setExpand"
        />
      </template>
      <right
        ref="right"
      />
    </BKMutableContainer>
  </BKModal>
</template>
<script>
import left from './components/left.vue'
import right from './components/right.vue'
// const appId = 'YSJC'
// const bzCode = 'YSJC'

export default {
  name: 'TableConfig',
  components: {
    left, right
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    openPage: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
    }
  },
  mounted () {

  },
  methods: {
    setExpand (expand) {
      this.$refs.mc.setExpand('left', expand)
    },
    close () {
      if (this.$refs.right.isRefresh || this.$refs.left.isRefresh) {
        this.$emit('refresh')
      }
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-footer.footer_box {
    padding: 0;
    // background: #f2f8fe;
    background: #f6fbff;
    padding-top: 0 !important;

    .p-a-mini {
      padding: 5px 0;
      position: relative;

      .modal-form-close-button {
        position: absolute;
        right: 5px;
        bottom: 5px;
        margin-bottom: 0;
      }
    }
  }

  .mc-dragger {
    &.left-dragger {
      // background: #f8f8f9 !important;
      border: none !important;
      border-right: 1px #cbd0e4 solid !important;
      background: #fff !important;
      box-shadow: 0 0 0 0 !important;
      // flex: 0 0 3px;

      &::before {
        height: 100%;
        width: 1px;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 1;
        content: "";
        position: absolute;
        // background-color: #e0e5ee;
      }

      &:hover {
        .dragger-icon {
          display: block;
        }
      }

      .dragger-icon {
        display: none;
        left: -1px;
      }
    }
  }
}
</style>
